<template>
  <div class="area-selection-box">
    <div class="selection-title">
      <span>场次配置</span>
    </div>
    <div class="selection-content">
      <div class="table-box">
        <div class="table-title">
          <span>参与计算的场次</span>
          <el-button type="primary">+新增区域方案</el-button>
        </div>
        <el-table border size="mini" height="100%" :data="basicTableData" style="width: 100%">
          <el-table-column prop="name" label="场次名称" align="center" show-overflow-tooltip />
          <el-table-column prop="time" align="center" label="预报时间" show-overflow-tooltip />
          <el-table-column prop="number" label="预热期-天" align="center" show-overflow-tooltip />
          <el-table-column prop="level" label="预见期-小时" align="center" width="150" show-overflow-tooltip />
          <el-table-column prop="timelevel" label="计算开始/结束时间" align="center" width="200" show-overflow-tooltip />
          <el-table-column label="操作" fixed="right" width="150">
            <template #default>
              <el-button link type="primary" size="small" @click="handleClick">修改</el-button>
              <el-button link type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagi-nation :pageSize="page.pageSize" :pageTotal="page.total" @pageFunc="pageFunc" class="page">
        </pagi-nation>
      </div>
      <div class="tabs-box">
        <div class="tabs-title">
          <span>区域计算方案设置区-</span>
          <span>20211019-20211030</span>
        </div>
        <div class="tabs-content">
          <el-row>
            <div class="content-item">
              <span>场次选择:</span>
              <el-select v-model="countValue" placeholder="20211019-20211030">
                <el-option label="20211019-20211030" value="20211019-20211030"></el-option>
              </el-select>

              <div class="btn">
                <el-button type="primary">确定</el-button>
              </div>
            </div>
          </el-row>
          <el-row>
            <div class="content-item">
              <span>预报时间:</span>
              <el-date-picker v-model="date" placeholder="2022-10-19 12:00"></el-date-picker>
            </div>
          </el-row>
          <el-row>
            <div class="content-item">
              <span>预热期</span>
              <el-input v-model="hotDate" placeholder=""></el-input>
              <span>天</span>
              <span>开始时间</span>
              <span>2021-10-16 10:00</span>
            </div>
          </el-row>
          <el-row>
            <div class="content-item">
              <span>预见期</span>
              <el-input v-model="hotDate" placeholder=""></el-input>
              <span>小时</span>
              <span>结束时间</span>
              <span>2021-10-21 18:00</span>
            </div>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { schemes } from '@/assets/data/com_data/40501009_info.json'
import pagiNation from '@/components/app-pagination/pagination.vue'
let page = reactive({
  pageNum: 1, //当前页
  pageSize: 10, //每页条目数
  total: 3 // 记录总数
})
const efflux = reactive(schemes.floodForecast)
const state = reactive({})
const basicTableData = reactive([
  {
    name: '20211019-20211030 ',
    time: '2022-10-19 10：00',
    number: '7',
    level: '12',
    timelevel: '2021-10-16 12:00    2021-10-21 12:00'
  },
  {
    name: '20211019-20211030 ',
    time: '2022-10-19 10：00',
    number: '7',
    level: '12',
    timelevel: '2021-10-16 12:00    2021-10-21 12:00'
  },
  {
    name: '20211019-20211030 ',
    time: '2022-10-19 10：00',
    number: '7',
    level: '12',
    timelevel: '2021-10-16 12:00    2021-10-21 12:00'
  }
])
const current = ref(0)
const arrBtn = reactive(['洪水预报方案', '河段', '水工程'])
const searchBtn = (index) => {
  current.value = index
}
</script>
<style lang="less" scoped>
.area-selection-box {
  width: 100%;
  height: 100%;
  .selection-title {
    height: 30px;
    margin-left: 20px;
    span {
      color: #5583e6;
      font-size: 16px;
    }
  }
  .selection-content {
    height: 500px;
    .table-box {
      width: 100%;
      // margin: 0 2.5%;
      // background: white;
      .table-title {
        display: flex;
        height: 35px;
        margin-left: 20px;
        margin-bottom: 5px;
        align-items: center;
        justify-content: space-between;
        span:nth-of-type(1) {
          color: black;
          font-size: 16px;
        }
        span:nth-of-type(2) {
          width: 120px;
          height: 25px;
          background: #5583e6;
          border-radius: 10px;
          // display: inline-block;
          display: flex;
          justify-content: center;
          align-items: center;
          color: white;
        }
      }
      :deep(.el-table) {
        width: 100%;
      }
      .page {
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
      }
    }
    .tabs-box {
      .tabs-title {
        margin: 20px 0 0 20px;
        span:nth-of-type(1) {
          color: black;
          font-size: 16px;
        }
        span:nth-of-type(2) {
          color: #5583e6;
          font-size: 16px;
        }
      }
      .tabs-content {
        box-sizing: border-box;
        margin-left: 40px;
        height: 100%;
        :deep(.el-input) {
          width: 250px;
          margin: 0 15px;
        }
        .content-item {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 50px;
          span:nth-of-type(3) {
            margin: 0 20px 0 100px;
          }
          .btn {
            margin-left: 250px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
